@import './hack.less';
.canvas {
  height: 384px;
  overflow: hidden;
  position: relative;
  canvas {
    //margin-left: -158px;
    //margin-top: -48px;
  }
  span {
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    font-size: 14px;
    padding: 4px;
    &:nth-of-type(1) {
      top: 0px;
      left: 0px;
      border-bottom-right-radius: 7px;
      animation: spanmove 1s;
    }
    &:nth-of-type(2) {
      top: 0px;
      right: 0px;
      border-bottom-left-radius: 7px;
      animation: spanmove2 1s;
    }
    &:nth-of-type(3) {
      top: 36px;
      right: 0px;
      border-bottom-left-radius: 7px;
      animation: spanmove2 1s .3s;
      transform: translateX(4rem);
      animation-fill-mode: forwards;
    }
    &:nth-of-type(4) {
      top: 72px;
      right: 0px;
      border-bottom-left-radius: 7px;
      vertical-align: text-top;
      padding: 2px 4px;
      animation: spanmove2 1s .6s;
      transform: translateX(4rem);
      animation-fill-mode: forwards;
      i{
        display: inline-block;
        background: url("../../static/img/add.png") no-repeat;
        background-position: bottom;
        margin-right: 3px;
        width: 15px;
        height: 18px;
      }
    }
  }
}
.switch{
  width: 25px;
  height: 25px;
  top: 200px;
  right:0px;
  animation: spanmove2 1s .9s;
  transform: translateX(4rem);
  animation-fill-mode: forwards;
  border-bottom-left-radius: 7px;
  i{
    width: 25px;
    height: 25px;
    display: inline-block;
    background: url("../../static/img/change.png") no-repeat;
  }
}

@keyframes spanmove {
  from {
    transform: translateX(-4rem);
  }
  to {
    transform: translateX(0px);
  }
}
@keyframes spanmove2 {
  from {
    transform: translateX(4rem);
  }
  to {
    transform: translateX(0px);
  }
}